<template>
  <div>
      <div class="border">
          <div class="header" id="headerId">当前用户{{currentUsername}}{{isOnline?"在线":"离线"}} 正在和{{toName}}聊天</div>
          <div class="friends">
               <ul style="background-color: darkgrey">好友列表(请点击好友聊天)</ul>
                <ul id="friendsList">
                    <li v-for="item in friendsList">
                        <a @click="chatWith(item)">{{item}}</a>
                    </li>
                </ul>
          </div>
          <div class="chatWindow" id="chatWindow">聊天窗口</div>
          <div class="systemMessage">
               <ul style="background-color: darkgrey">系统通知</ul>


                <ul id="systemMsg">
                    <!--<li>Lili在线</li>-->
                    <li v-for="item in systemMsg ">
                         {{item}}上线啦
                    </li>
                </ul>
          </div>
          <div class="text">
                <textarea id="tex_content" class="textEdit" placeholder="请输入文字！"></textarea>
                <button @click="submit()">发送</button>
          </div>

      </div>
    
  </div>
</template>

<script>
export default {
  
    mounted(){
        this.currentUsername = this.$route.params.username;
        this.init();
        

    },
    data(){
        return{
            currentUsername:"",
            isOnline:true,
            toName:"",
            friendsList:[],
            systemMsg:[],
            ws:[],
            

        }
    },
    methods:{
        init(){
            //创建websocket对象
             this.ws = new WebSocket("ws://localhost:8088/chat");
            let _this = this;
           
            //接收到服务端的推送后触发
            this.ws.onmessage = function (evt) {
                //获取数据
                var dataStr = evt.data;
                //jsonData 格式举例（需要判断是否是系统消息）：{“systemMsgFlag”: false, "fromName": "YYJ", "message": “你在哪里呀？”}
                var jsonData = JSON.parse(dataStr);
                //判断是否是系统消息
                if (jsonData.systemMsgFlag) {
                    //是系统消息，处理
                    //1.好友列表处理
                    
                    var allNames = jsonData.message;
                    _this.friendsList.splice(0,_this.friendsList.length)
                    _this.systemMsg.splice(0,_this.systemMsg.length);
                    for (var name of allNames) {
                        if (_this.currentUsername != name) {
                            
                            
                            _this.friendsList.push(name);
                            
                            _this.systemMsg.push(name);
                            
                        }
                    }
                    
                }else {
                    //不是系统消息，是发送给指定用户的消息,示例值：{“systemMsgFlag”: false, "fromName": "YYJ", "message": “你在哪里呀？”}
                    var data = jsonData.message;
                    var cnt = "<div >"+data+"</div>"
                    if ( _this.toName === jsonData.fromName) {
                        $("#chatWindow").append(cnt);
                    }
                    var chatData = sessionStorage.getItem(jsonData.fromName);
                    if (chatData != null) {
                        cnt = chatData + cnt;
                    }
                    sessionStorage.setItem(jsonData.fromName ,cnt);


                }
                 
            };
            //关闭连接触发
            this.ws.onclose = function () {
                 //当前用户离线
                 _this.isOnline=false;
                 _this.friendsList.splice(this.friendsList.indexOf(_this.currentUsername),1);
                 console.log(_this.friendsList);
                };
            
    
    

        },
        chatWith(name){
            this.toName = name;
            
            //清空聊天区
            $("#chatWindow").html("");
            //当点击聊天人列表时，需要获与之对应的聊天记录，聊天记录存放在sessionStorage中
            var chatData = sessionStorage.getItem(this.toName);
            if (chatData != null) {
                //渲染聊天数据到聊天区
                $("#chatWindow").html(chatData);
            }
        },
        submit(){
            //发送按钮点击
        
                //获取发送输入框中的内容
                var data = $("#tex_content").val();
                //点击发送后，清空输入内容框架
                $("#tex_content").val("");
                var sendJson = {"toName": this.toName, "message": data};
                //聊天框显示发送内容
                var cnt = "<div style=\"float:right\">" + data+ "</div><br />";
                $("#chatWindow").append(cnt);
                var chatData = sessionStorage.getItem(this.toName);
                //如果不是空的则需要累加聊天记录
                if (chatData != null) {
                    cnt = chatData + cnt;
                }
                sessionStorage.setItem(this.toName,cnt);

                //发送数据给服务端
                this.ws.send(JSON.stringify(sendJson));

  
        },
       

    }

};

</script>

<style scoped>
    .border{
        margin: auto auto;
        width:1000px;
        height:600px;
        border: 1px solid blue;
    }
    .header{
        width:998px;
        height:30px;
        border: 1px solid rgb(0, 255, 106);

    }
    .friends{
        float: right;
        width:300px;
        height:300px;
        border: 1px solid rgb(255, 251, 0);

    }
    .systemMessage{
        float: right;
        width:300px;
        height:266px;
        border: 1px solid rgb(0, 255, 13);

    }
    .chatWindow{
        float: right;
        width:696px;
        height:300px;
        border: 1px solid rgb(255, 0, 0);

    }
    .text{
        float: right;
        width:696px;
        height:266px;
        border: 1px solid rgb(7, 7, 7);

    }
    .textEdit{
        width:690px;
        height:230px;
    }
    
    
</style>